<template>
  <div>
    <!-- 导航 -->
    <NavBar class="NavBar">
      <div slot="center" class="nav-bar">购物车({{ cartLength }})</div>
    </NavBar>
    <!-- 商品列表 -->
    <CartList :cartList="cartList" class="cart-list" @ifAllCheck="ifAllCheck" />
    <!-- 底部汇总 -->
    <CartBottomBar
      class="Cart-bottom-bar"
      :totalPrice="totalPrice"
      @clickAllCheck="clickAllCheck"
      :ifAllCheckd="ifAllCheckd"
      :checkdCartLength="checkdCartLength"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NavBar from "components/common/navbar/NavBar";

import CartList from "./childComps/CartList";
import CartBottomBar from "./childComps/CartBottomBar.vue";
export default {
  data() {
    return {
      ifAllCheckd: true,
    };
  },
  computed: {
    ...mapGetters(["cartLength", "cartList"]),
    totalPrice() {
      let temp = this.cartList
        .filter((item) => item.checkd == true)
        .map((item) => parseFloat(item.price) * parseInt(item.count))
        .reduce((x, y) => {
          return parseFloat(x) + parseFloat(y);
        }, 0);
      return temp;
    },
    checkdCartLength() {
      let temp = 0;
      this.cartList.forEach((item) => {
        if (item.checkd == true) {
          temp += 1;
        }
      });
      return temp;
    },
  },
  components: {
    NavBar,
    CartList,
    CartBottomBar,
  },
  created() {
    // this.cartList = this.$state.cartList;
  },
  methods: {
    clickAllCheck() {
      const ifAllCheckdFind = this.cartList.find(
        (item) => item.checkd == false
      );
      // console.log('ifAllCheckdFind',ifAllCheckdFind);
      if (ifAllCheckdFind) {
        this.ifAllCheckd = true;
        this.cartList.forEach((item) => {
          item.checkd = true;
        });
      } else {
        this.ifAllCheckd = false;
        this.cartList.forEach((item) => {
          item.checkd = false;
        });
      }
    },
    ifAllCheck() {
      const ifAllCheckdFind = this.cartList.find(
        (item) => item.checkd == false
      );
      if (ifAllCheckdFind) {
        this.ifAllCheckd = false;
      } else {
        this.ifAllCheckd = true;
      }
    },
  },
};
</script>

<style scoped>
.NavBar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
  display: block;
}
.cart-list {
  /* height: calc(100% - 44px); */
}
.Cart-bottom-bar {
  /* padding-left:15px; */
}
</style>
